/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  列表系列组件 - 加油券使用状态列表、地址列表
**/
<template>
  <ul class="ca-li">
    <li :key="index" @click="handleListClick(item)" v-for="(item, index) in list">
      <p class="ca-name">{{item.petrolStationName}} <span class="status fr">{{item.province}}-{{item.city}}-{{item.citProper}}</span></p>
      <p class="ca-info">{{item.address}}</p>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'ListData',
  props: ['list'],
  components: {},
  data() {
    return {}
  },
  watch: {},
  mounted() {
  },
  created() {

  },
  methods: {
    /**
     *@Description
     *@Param
     *@Return 列表点击 事件监听.
     **/
    handleListClick(data) {
      this.$emit('singleDetail', data)
    },
  }
}
</script>
<style lang="scss" scoped>
.ca-li {
  padding: 0 15px;
  color: #000;
  li {
    padding: 12px 0;
    border-bottom: 1px solid #dcdcdc;
  }
}
.ca-name {
  line-height: 20px;
  margin-bottom: 5px;
  span {
    color: #707070; /* 已使用 也是默认值 */
  }
  .status {
    color: #009f2a; /* 待使用*/
    color: #707070; /* 已使用*/
    color: #d18200; /* 待支付*/
  }
}
.ca-info {
  font-size: 12px;
  opacity: 0.65;
}
</style>
